<template>
	<view>
		<video class="video" autoplay src="https://vod.51dongshi.com/d2cdbe06vodtranscq1251129115/3e304a105285890803716354179/v.f30.mp4" :controls="false"></video>
		<u-tabs-swiper ref="tabs" :show-bar="false" :list="list" :is-scroll="false" swiperWidth="750" :current="current" @change="handleTabs"></u-tabs-swiper>
		<image class="img-info" :src="list[current].img" mode="widthFix"></image>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: '租车流程',
					img: 'https://img0.baidu.com/it/u=313191850,1293583483&fm=253&fmt=auto?w=383&h=531'
				},
				{
					name: '车辆控制',
					img: 'https://img1.baidu.com/it/u=2399254486,2905822368&fm=253&fmt=auto?w=500&h=841'
				},
				{
					name: '车辆控制',
					img: 'https://img0.baidu.com/it/u=3967540997,2322023647&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667'
				},
				{
					name: '换车说明',
					img: 'https://img2.baidu.com/it/u=815310603,3427191646&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067'
				}
			],
			current: 0
		};
	},
	methods: {
		handleTabs(value) {
			this.current = value;
		}
	}
};
</script>

<style lang="scss">
video {
	width: 100%;
}
.img-info {
	width: 100%;
}
</style>
